<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <p>计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="resetCount">重置</button>
    
    <div v-if="loading" class="loading">加载中...</div>
    
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'

// 定义接口
interface Item {
  id: number
  name: string
}

// 响应式数据
const title = ref<string>('财务模块计量页面')
const count = ref<number>(0)
const loading = ref<boolean>(false)
const items = ref<Item[]>([])

// 计算属性
const doubleCount = computed(() => count.value * 2)

// 方法
const increment = (): void => {
  count.value++
}

const decrement = (): void => {
  count.value--
}

const resetCount = (): void => {
  count.value = 0
}

// 模拟异步获取数据
const fetchData = async (): Promise<void> => {
  try {
    loading.value = true
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    items.value = [
      { id: 1, name: '项目1' },
      { id: 2, name: '项目2' },
      { id: 3, name: '项目3' }
    ]
  } catch (error) {
    console.error('获取数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 生命周期钩子
onMounted(() => {
  console.log('组件已挂载')
  fetchData()
})

// 暴露给模板的属性/方法（如果需要暴露给父组件）
defineExpose({
  increment,
  decrement,
  resetCount
})
</script>

<style scoped>
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

button {
  margin: 0 5px;
  padding: 5px 10px;
}

.loading {
  color: #666;
  font-style: italic;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 5px 0;
}
</style>